<template>
  <div class="account">

    <gl-breadcrumb class="mb15"
                   text="账号管理"></gl-breadcrumb>
    <div class="main">
      <el-select v-model="userName"
                 placeholder="请选择角色"
                 class="mr20"
                 @change='userValue' clearable>
        <el-option v-for="item in userNameList"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="type"
                 placeholder="请选择状态"
                 class="mr20"
                 @change='typeValue' clearable>
        <el-option v-for="item in typeList"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
        </el-option>
      </el-select>
      <el-input class="ipt"
                v-model="input"
                placeholder="请输入账号名称"></el-input>
      <el-button type="primary"
                 @click="search"
                 icon="el-icon-search">搜索</el-button>
      <el-button type="primary"
                 @click="openAdd"
                 icon="el-icon-plus">新建</el-button>
      <div class="table">
        <gl-table :columns='list'
                  :data="lists"
                  class="gl-table"
                  @button="changeButton">
        </gl-table>
      </div>
      <gl-pagination :total='totals'
                     class="page"
                     :curr="curr"
                     :size="limits"
                     @callback='changePage'></gl-pagination>
    </div>
    <gldelbtn :show="isShow"
              :text='text'
              @cancel="canceled"
              @determine='defineCallback'></gldelbtn>

  </div>
</template>

<script>
import config from '@/config/config'
import { mapMutations } from 'vuex'
export default {
  name: 'Account',
  components: {},
  data() {
    return {
      userName: '', // 角色
      userNameList: [],
      type: '', // 状态
      typeList: [
        {
          value: '1',
          label: '正常'
        },
        {
          value: '2',
          label: '禁用'
        }
      ],
      input: '',
      list: [
        { label: '登录账号', prop: 'username' },
        { label: '姓名', prop: 'realname' },
        { label: '授权角色', prop: 'role_name' },
        { label: '备注', prop: 'remark', type: 'textarea' },
        { label: '状态', prop: 'status_cnn' },
        { label: '操作', prop: '', btns: ['编辑', '删除'] }
      ],
      lists: [],
      isShow: false,
      text: '',
      totals: '',
      curr: 1,
      limits: 10,
      tValue: '',
      uValue: '',
      id: '',
      
    }
  },
  computed: {},
  watch: {
    input() {
      if (!this.input) {
        this.getAccount()
      }
    }
  },
  methods: {
    ...mapMutations(['setListInfo']),
    // 操作
    changeButton(val) {
      if (val.index == 0) {
        // console.log('编辑')
        this.setListInfo(val.row)
        this.$router.push({
          name: 'AccountAdd',
          query: {
            num: 1
          }
        })
      } else {
        this.text = val.row.realname
        this.id = val.row.id
        this.isShow = true
        // console.log('删除')
      }
    },
    // 新建
    openAdd() {
      this.$router.push('/setting/account/accountAdd')
    },
    // 账号列表
    getAccount() {
      let params = {
        member_type: 'admin',
        curr: this.curr,
        limits: this.limits,
        status: this.tValue,
        role_id: this.uValue,
        keyword: this.input
      }
      this.http
        .$post('user/api/get_list', params,{loading:true})
        .then(res => {
          res.list.map(val => {
            if (val.remark == '') {
              val.remark = '无'
            }
          })
          this.lists = res.list
          this.totals = res.total
        })
        .catch(err => {
          this.$message.error(err.msg)
        })
    },

    // 验证码确定
    defineCallback(code, vCode) {
      if (vCode == code) {
        // console.log('删除成功')

        this.http
          .$post('user/api/delete', {
            ids: this.id
          })
          .then(res => {
            this.getAccount()
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          })
          .catch(err => {
            this.$message.error(err.msg)
          })
        this.isShow = false
      } else {
        this.$message.error('验证码不正确')
      }
    },
    // 关闭
    canceled() {
      this.isShow = false
    },
    // 分页
    changePage(val) {
      this.curr = val.curr
      this.limits = val.size
      this.getAccount()
    },
    // 状态
    typeValue(val) {
      this.tValue = val
      this.curr = 1
      this.getAccount()
    },
    // 角色
    userValue(val) {
      this.uValue = val
      this.curr = 1
      this.getAccount()
    },
    // 搜索
    search() {
      this.curr = 1
      this.getAccount()
    },
    // 请求角色
    getRole() {
      this.http
        .$post('system/api/all_role_list')
        .then(res => {
          for (let i = 0; i < res.length; i++) {
            this.userNameList.push({
              value: res[i].id,
              label: res[i].title
            })
          }
        })
        .catch(err => {
          this.$message.error(err.msg)
        })
    }
  },
  created() {
    this.getAccount()
    this.getRole()
  },
  mounted() {}
}
</script>
<style lang='less' scoped>
/deep/ .el-dialog__header {
  border-bottom: 1px solid rgba(235, 235, 235, 1);
}

.account {
  .main {
    // width: 918px;
    margin-top: 20px;
    background-color: #fff;
    box-sizing: border-box;
    padding: 30px 20px;

    .ipt {
      width: 20%;
      padding-right: 20px;
    }

    .table {
      padding-top: 20px;
    }
    .page {
      padding-bottom: 40px;
    }
  }
}
</style>